<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">

    <compontent :is="currentCom"></compontent>
</div>

<template id="mytem">
    <div>
        <table border="1" style="text-align: center" width="80%">
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>
            <tr>
                <td>1</td>
                <td>apple</td>
                <td>3</td>
                <td>
                    <input type="button" value="+" @click="num1++;sum1 = 3*num1">
                    {{num1}}
                    <input type="button" value="-" @click="num1>0?num1--:num1=0;sum1 = 3*num1">
                </td>
                <td>
                    {{sum1}}
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>pear</td>
                <td>4</td>
                <td>
                    <input type="button" value="+" @click="num2++;sum2 = 4*num2">
                    {{num2}}
                    <input type="button" value="-" @click="num2>0?num2--:num2=0;sum2 = 4*num2">
                </td>
                <td>
                    {{sum2}}
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>banana</td>
                <td>5</td>
                <td>
                    <input type="button" value="+" @click="num3++;sum3 = 5*num2">
                    {{num3}}
                    <input type="button" value="-" @click="num3>0?num3--:num3=0;sum3 = 5*num3">
                </td>
                <td>
                    {{sum3}}
                </td>
            </tr>
            <tr>
                <td colspan="5">总价：￥{{count}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
    new Vue({
        el: '#app',
        data: {
            currentCom: 'jsq'
        },
        components: {
            jsq: {
                template: '#mytem',
                data () {
                    return {
                        num1: 0,
                        num2: 0,
                        num3: 0,
                        sum1: 0,
                        sum2: 0,
                        sum3: 0,
                        count: 0
                    }
                },
                watch: {
                    sum1(){
                        this.count = this.sum1 + this.sum2 + this.sum3
                    },
                    sum2(){
                        this.count = this.sum1 + this.sum2 + this.sum3
                    },
                    sum3(){
                        this.count = this.sum1 + this.sum2 + this.sum3
                    }
                },
            }
        }
    })
</script>
</body>
</html>
